<template>
	<view class="page">
		<view class="banner relative">
			<!-- 头部 -->
			<!-- #ifdef MP-WEIXIN -->
				<topVue background="transparent">
					<view class="slotVue">
						<image
							src="../../static/back_white.png" 
							style="width: 38rpx; height: 38rpx; left: 30rpx; z-index: 9999;" 
							class="absolute-middle"
							@click="$tools.back(1)"
						></image>
					</view>
				</topVue>
			<!-- #endif -->
			<view class="inner absolute-center">
				<image src="../../static/person/vipBanner_inner.png" mode="widthFix" style="width: 690rpx;"></image>	
			</view>
			<view class="sonVue absolute-center flex align-center">
				<u-avatar src="1" size="115"></u-avatar>
				<view class="right">
					<view class="name">会飞的西瓜</view>
					<view class="limit">年卡会员：2028-05-24到期</view> 
					<!-- 暂未开通会员 -->
				</view>
			</view>
		</view>
		<view class="using padding-row30">年会员卡：使用次数：<text>22次</text> <text class="padding-row20"></text>剩余次数：<text>22次</text></view>
		
		<view class="box flex-between margin30">
			<view class="boxLi flex-column align-center flex-between" :class="{action: current===0}" @click="current=0">
				<view class="key" :class="{active: current===0}">次卡</view>
				<image src="../../static/person/3.png" style="width: 128rpx; height: 128rpx;"></image>
				<view class="key fs42" :class="{active: current===0}">30元/次</view>
				<view class="key fs42" :class="{active: current===0}">1次免费报名</view>
				<view class="key" :class="{active: current===0}">转场特权</view>
			</view>
			<view class="boxLi flex-column align-center flex-between" :class="{action: current===1}" @click="current=1">
				<view class="key" :class="{active: current===1}">年卡</view>
				<image src="../../static/person/4.png" style="width: 128rpx; height: 128rpx;"></image>
				<view class="key fs42" :class="{active: current===1}">998元/次</view>
				<view class="key fs42" :class="{active: current===1}">30次免费报名</view>
				<view class="key" :class="{active: current===1}">转场特权、优先匹配</view>
			</view>
		</view>
		
		<view class="botVue flex-center align-center">
			<view class="apply fs30 fw600">续费</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				current: 0,
			}
		}
	}
</script>

<style lang="less" scoped>
	.banner {
		width: 100%;
		height: 400rpx;
		background: url("../../static/person/vipBanner.png") no-repeat;
		background-size: cover;
		.inner {
			width: 690rpx;
			height: 180rpx;
			bottom: -2rpx;
			z-index: 99;
		}
		.sonVue {
			width: 690rpx;
			height: 180rpx;
			bottom: -2rpx;
			z-index: 999;
			padding-left: 50rpx;
			.right {
				padding-left: 20rpx;
				.name {
					color: #603D10;
					font-weight: 600;
					font-size: 32rpx
				}
				.limit {
					color: #6D4B1F;
					padding-top: 20rpx;
				}
			}
		}
	}
	.using {
		font-size: 24rpx;
		padding-top: 50rpx;
		text {
			color: #603D10;
			font-weight: 600;
		}
	}
	.box {
		width: 690rpx;
		height: 400rpx;
		.boxLi {
			width: 328rpx;
			height: 400rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 3rpx solid rgba(143,142,147,0.2);
			padding: 30rpx 0 50rpx;
			.key {
				font-weight: 600;
				font-size: 28rpx;
				color: #8F8E93;
			}
			.active {
				color: #603D10;
				font-weight: 700;
			}
		}
		.action {
			border: 6rpx solid #E4C696;
			background: rgba(232,213,185,0.2);
		}
	}
	.botVue {
		width: 100%;
		height: 160rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		.apply {
			width: 640rpx;
			height: 96rpx;
			background: linear-gradient( 135deg, #F4E0C4 0%, #E9CEA5 50%, #DDB87D 100%);
			border-radius: 46px;
			border-radius: 48rpx;
			text-align: center;
			line-height: 96rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #603D10;
		}
	}
</style>